import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actions } from '../action/action';
import { Form, Select, Input, Modal, Spin, Button, message } from 'antd';
import _ from 'underscore';

const FormItem = Form.Item;
const Option = Select.Option;

message.config({
    top: 200,
    duration: 3,
});

class NewStore extends Component {
    componentDidMount() {
        this.props.searchMethod('brand', '');
    }
    fetchBrands(keyword) {
        if (keyword.length)
            this.props.searchMethod('brand', keyword);
        else return;
    }
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, store) => {
            if (!err) {
                this.props.createNewStore(store);
            }
        });
    }
    render() {
        const { triggerAddStore, newStore, isPending, createNewStore, } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };

        return (
            <Modal title="添加门店" visible={newStore.isAddStore} onCancel={triggerAddStore} footer={[
                <Button key="back" size="large" onClick={triggerAddStore}  >
                    关闭
                </Button>,
                <Button key="submit" type="primary" size="large" onClick={this.handleSubmit.bind(this)} loading={newStore.loading}>
                    确认
                </Button>,
            ]} >
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="门店名称"
                        hasFeedback
                    >
                        {
                            getFieldDecorator('storeName', {
                                rules: [{ required: true, message: '请输入门店名称!' }],
                            })(<Input />)
                        }
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="门店品牌"
                    >
                        {
                            getFieldDecorator('brandNo', {
                                rules: [{ required: true, message: '请选择门店品牌!' }],
                            })(<Select
                                showSearch
                                mode="multiple"
                                style={{ width: '100%' }}
                                notFoundContent={isPending ? <Spin size="small" /> : null}
                                filterOption={false}
                                onSearch={this.fetchBrands.bind(this)}
                            >
                                {
                                    newStore.brandList && newStore.brandList.map(d => <Option key={d.brandNo} value={'' + d.brandNo}>{d.brandName}</Option>)
                                }

                            </Select>)
                        }
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

NewStore = Form.create({})(NewStore);

const _NewStore = connect(
    state => {
        return {
            newStore: state.newStore,
            isPending: state.isPending
        }
    },
    dispatch => {
        return {
            createNewStore: (store) => {
                actions.createNewStore(dispatch, store, (data) => {
                    if (data.success)
                        message.success(data.message);
                    else
                        message.error(data.message);
                })
            },
            searchMethod: (type, keyword) => {
                actions.searchMethod(dispatch, type, keyword);
            }
        }
    }
)(NewStore);

export default _NewStore;